<template>
    <div class="back_contain_n">
        <!-- table -->
        <sys-table  
            :tableData="tableData" 
            :tableLoading="tableLoading" 
            :tableHeader="tableHeader"
            :scopeWidth="120"
        >
            <template slot-scope="scope" slot="operate">
                <el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>
            </template>
        </sys-table>


		<!-- 新建弹框 -->
		<div class="zll-dialog">
			<popout  :title="type == 'add'?'统计录入':'统计查看'"  :visible.sync="addDialog" v-if="addDialog" class="bigSize">
				<Add ref="add" slot="content" :editData="editData" :type="type"></Add>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addDialog = false">关 闭</p>
					<p class="zll-botton" v-if="type !== 'see'" @click="()=>{this.$refs.add.submitForm('addForm')}">提 交</p>
				</template>
			</popout>
		</div>


        <div class="_detail">
            <div class="part_1">
                <div class="part_nav">
                    <img src="@/assets/back_manage_img/pv_img.png" alt="">
                    <div class="_list">
                        <p><span>1.01</span>兆瓦</p>
                        <p>装机总容量</p>
                    </div>
                </div>
                <div class="text_list">
                    <span class="text_left">建设日期：</span>
                    <span class="text_right">2023-03-20</span>
                </div>
                <div class="text_list">
                    <span class="text_left">并网日期：</span>
                    <span class="text_right">{{query.startTime}}</span>
                </div>
                <div class="text_list">
                    <span class="text_left">已用年数：</span>
                    <span class="text_right">{{usedYear}}</span>
                </div>
            </div>
            <div class="part_2">
                <p class="titlens">{{query.execYear}}  自建光伏发电数据分析</p>
                <div class="box_list">
                    <div class="box_nav">
                        <p class="box_inner"><span>{{powerGeneration}}</span>兆瓦时</p>
                        <p class="box_name">总发电量</p>
                    </div>
                    <div class="box_nav box_nav2">
                        <p class="box_inner"><span>{{co2}}</span>吨</p>
                        <p class="box_name">CO2减排</p>
                    </div>
                    <div class="box_nav box_nav3">
                        <p class="box_inner"><span>{{equivalentPlant}}</span>颗</p>
                        <p class="box_name">等效绿植</p>
                    </div>
                    <div class="box_nav box_nav4">
                        <p class="box_inner"><span>{{selfConsumption}}</span>MWh</p>
                        <p class="box_name">自用电量</p>
                    </div>
                    <div class="box_nav box_nav5">
                        <p class="box_inner"><span>{{powerSurplus}}</span>MWh</p>
                        <p class="box_name">余电电量</p>
                    </div>
                    <div class="box_nav box_nav6">
                        <p class="box_inner"><span>{{selfUseRate}}</span></p>
                        <p class="box_name">自用率</p>
                    </div>

                </div>
            </div>
            <div class="part_3">
                <div style="display: flex;">
                    <div class="text_list">
                        <span class="text_left">发电最高月：</span>
                        <span class="text_right">{{maxGenerateMonths}}</span>
                    </div>
                    <div class="text_list">
                        <span class="text_left">发电最高日：</span>
                        <span class="text_right">{{maxGenerateDays}}</span>
                    </div>
                </div>
                <div class="echartLine" ref="echartLine"></div>
            </div>
        </div>
    </div>
</template>

<script>
import Add from './add';
import echartOption from './echart'
export default {
    data(){
        return {
            tableLoading:true, //table刷新
            type: '',
            editData: {},
            tableData: [{},{}],
            tableHeader:[],
            addDialog: false,

			query: {
				execYear:new Date().getFullYear(),
				startTime:'2023-04-10',
			},

			usedYear:'',

			powerGeneration:'',
			co2:'',
			equivalentPlant:'',
			selfConsumption:'',
			powerSurplus:'',
			selfUseRate:'',
			maxGenerateMonths:'',
			maxGenerateDays:'',

        }
    },
    methods: {
        getList(){//获取表格数据
			let self = this;

			self.tableData = [];
			self.tableLoading = true;

			self.$http({
				url: "/jinl/photovoltaic/getPhotovoltaicStatistics",
				method: "post",
				data: JSON.stringify(self.query),
				dataType: 'json',
				contentType: 'application/json',
			}).then(resp=>{
				if (resp.success) {
					self.tableHeader =  [
						{"columnValue": "recordYear", "columnName": "年度" },
						{"columnValue": "powerGeneration", "columnName": "发电量（MWh）" },
						{"columnValue": "co2", "columnName": "CO2减排（吨）" },
						{"columnValue": "equivalentPlant", "columnName": "等效绿植（棵）" },
						{"columnValue": "selfConsumption", "columnName": "自用电量（MWh）" },
						{"columnValue": "powerSurplus", "columnName": "余电电量（MWh）" },
						{"columnValue": "selfUseRate", "columnName": "自用率" },
						{"columnValue": "maxGenerateMonths", "columnName": "发电最高月" },
						{"columnValue": "maxGenerateDays", "columnName": "发电最高日" },
					];

					let data = resp.result['list'];

					self.tableData = data;

					//页面下方自建光伏发电
					for (let item of data){
						if (self.query.execYear == item.recordYear) {

							self.powerGeneration = item.powerGeneration;
							self.co2 = item.co2;
							self.equivalentPlant = item.equivalentPlant;
							self.selfConsumption = item.selfConsumption;
							self.powerSurplus = item.powerSurplus;
							self.selfUseRate = item.selfUseRate;

							self.maxGenerateMonths = item.maxGenerateMonths;
							self.maxGenerateDays = item.maxGenerateDays;
							break;
						}

					}

					//装机容量下的已用年数
					self.tableLoading = false;
					self.usedYear = resp.result['usedYear'];
                    let monthDataList = resp.result.monthDataList
                    self.getEchartData(monthDataList)

				}
			});
        },
		edit(val,type) {
			let self = this;
			self.addDialog = true;

			self.$nextTick(()=> {
				self.type = type;
				self.editData = Object.assign({},val);
			});
		},
        getEchartData(list) {
            let self = this;
            let echart = self.$echarts.init(self.$refs.echartLine);
            let option = echartOption.option;
            let xData = [];
            let seriesData = [];
            list.filter((item) => {
                xData.push(item.recordMonth)
                seriesData.push(item.powerGeneration)
            })
            option.xAxis.data = xData
            option.series[0].data = seriesData
            echart.setOption(option);
            window.onresize = function() {
                echart.resize()
            }
        }
    },
    mounted(){
        let self = this;
        self.getList();//显示table
    },
    components: {
    	Add,
    }
}
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
._detail {
    display: flex;
    border: 1px solid #00d1d0;
    padding: 40px 40px;margin-top: 15px;
    .text_list {
        line-height: 26px;
        width: 150px;
        .text_left {
            color: #9E9E9E;
            display: inline-block;
            width: 72px;
        }
    }
    .part_1{
        width: 200px;
        border-right: 1px solid #ccc;
        .part_nav {
            display: flex;
            margin-bottom: 10px;
            img {
                width: 60px;height: 40px;margin-right: 10px;
            }
            ._list {
                line-height: 26px;
                span {
                    font-size: 20px;font-weight: 600;
                    color: #8bc34a;margin-right: 5px;
                }
            }
        }
    }
    .part_2{
        max-width: 500px; width: 40%;min-width: 350px;
        padding: 0 10px;
        .titlens {
            font-size: 16px;text-align: center;
        }
        .box_list {
            display: flex;flex-wrap: wrap;
            .box_nav {
                width: calc(33.333% - 6px);
                margin: 10px 3px;
                .box_inner {
                    height: 60px;line-height: 60px;
                    border: 1px solid #2196f3;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    text-align: center;
                    span {
                        font-size: 18px;font-weight: 600;color: #2196f3;
                    }
                }
                .box_name {
                    line-height: 30px;color: #fff;
                    text-align: center;
                    background: #2196f3;
                }
                &.box_nav2 {
                    .box_inner {
                        border-color: #ee5d52;
                        span {
                            color: #ee5d52;
                        }
                    }
                    .box_name {
                        background: #ee5d52;
                    }
                }
                &.box_nav3 {
                    .box_inner {
                        border-color: #8bc34a;
                        span {
                            color: #8bc34a;
                        }
                    }
                    .box_name {
                        background: #8bc34a;
                    }
                }
                &.box_nav4 {
                    .box_inner {
                        border-color: #3f51b5;
                        span {
                            color: #3f51b5;
                        }
                    }
                    .box_name {
                        background: #3f51b5;
                    }
                }
                &.box_nav5 {
                    .box_inner {
                        border-color: #ff9800;
                        span {
                            color: #ff9800;
                        }
                    }
                    .box_name {
                        background: #ff9800;
                    }
                }
                &.box_nav6 {
                    .box_inner {
                        border-color: #00d1d0;
                        span {
                            color: #00d1d0;
                        }
                    }
                    .box_name {
                        background: #00d1d0;
                    }
                }
            }
        }
    }
    .part_3{
        width: calc(60% - 201px);padding: 0 20px;
        min-width: 400px;
        .echartLine {
            width: 100%;
            height: 200px;
        }
    }
}
</style>